<template>
  <div class="chooseSheetModalBody">
    <div class="selecteItem">
      <span class="selecteItemTit"><i>*</i>sheet</span>
      <a-select class="selecteBox" v-model:value="pageData.sheetNo" placeholder="请选择sheet文件">
        <a-select-option v-for="(item, index) in sheetList" :value="index" :key="item">{{ item }}</a-select-option>
      </a-select>
    </div>
    <div class="btnFooter">
      <zdy-button class="selectBtn" @click="closeModal">取消</zdy-button>
      <zdy-button class="selectBtn" type="primary" @click="affirm">确定</zdy-button>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue'
import ZdyButton from '@/components/ZdyButton/index.vue'

export default {
  name: 'ChooseSheetModalBody',
  components: {
    ZdyButton
  },
  props: {
    sheetList: {
      type: Array,
      default: []
    }
  },
  setup(props, context) {
    const pageData = reactive({
      sheetNo: 0
    })

    //取消
    const closeModal = () => {
      context.emit('closeModal', false)
    }

    //确定
    const affirm = () => {
      context.emit('closeModal', {
        sheetNo: pageData.sheetNo
      })
    }

    return {
      pageData,
      closeModal,
      affirm
    }
  }
}
</script>

<style lang="less" scoped>
.chooseSheetModalBody {
  padding: 24px 36px 24px 34px;
  .selecteItem {
    .selecteItemTit {
      display: inline-block;
      padding-right: 16px;
      i {
        vertical-align: -2px;
        margin-right: 3px;
        color: #ff0000;
      }
    }
    .selecteBox {
      display: inline-block;
      width: 300px;
      border-radius: 4px;
    }
  }
  .btnFooter {
    margin-top: 32px;
    text-align: center;
    .selectBtn {
      margin: 0px 4px;
    }
  }
}
</style>

<style lang="less">
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  height: 36px;
}
</style>
